<template>
  <div style="width: 100%">
    <div style="width:80%;height:800px;margin: auto" ref="technologyCreditChart"></div>
  </div>

</template>

<script>
const echarts = require('echarts')
export default {
  name: "technologyCredit",
  data() {
    return {
      option: {},
      userId: ''
    }
  },
  methods: {
    async Draw() {
      const {data: res} = await this.$http.get('/technologyCredit/technologyCredit/' + this.userId)

      let myChart = echarts.init(this.$refs.technologyCreditChart)
      this.option = {
        title: {
          text: '技术信用',
          subtext: '近六年数据'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['接单数', '退款数', '好评数', '总评分']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: res.content.dateList
        },
        series: [
          {
            name: '接单数',
            type: 'bar',
            data: res.content.ordList
          },
          {
            name: '退款数',
            type: 'bar',
            data: res.content.chargebackList
          },
          {
            name: '好评数',
            type: 'bar',
            data: res.content.posComList
          },
          {
            name: '总评分',
            type: 'bar',
            data: res.content.totalIntegralList
          }
        ]
      };
      myChart.setOption(this.option);
    }
  },
  mounted() {
    this.userId = this.$route.query.userId
    this.Draw()
  }
}
</script>

<style scoped>

</style>